<!--
 * @Description: 子组件
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2021-05-09 19:24:23
 * @LastEditors: lhl
 * @LastEditTime: 2021-05-09 19:24:42
-->
<template>
  <div class="child">
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      子组件表单
    </van-divider>
    <!-- 开关 -->
    <van-field name="switch" label="开关">
      <template #input>
        <van-switch v-model="checked" size="20" />
      </template>
    </van-field>
    <!-- 复选框组 -->
    <van-field name="checkboxGroup" label="学习框架">
      <template #input>
        <van-checkbox-group v-model="groupChecked" direction="horizontal">
          <van-checkbox name="1" shape="square">react</van-checkbox>
          <van-checkbox name="2" shape="square">vue</van-checkbox>
        </van-checkbox-group>
      </template>
    </van-field>
    <!-- 单选框 -->
    <van-field name="radio" label="多端">
      <template #input>
        <van-radio-group v-model="checkedradio1" direction="horizontal">
          <van-radio name="1">taro</van-radio>
          <van-radio name="2">uni-app</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field name="radio" label="跨平台">
      <template #input>
        <van-radio-group v-model="checkedradio2" direction="horizontal">
          <van-radio name="3">Flutter</van-radio>
          <van-radio name="4">React native</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <!-- 步进器 -->
    <van-field name="stepper" label="步进器">
      <template #input>
        <van-stepper v-model="count" />
      </template>
    </van-field>
    <!-- 评分 -->
    <van-field name="rate" label="评分">
      <template #input>
        <van-rate v-model="rateVal" />
      </template>
    </van-field>
    <!-- 滑块 -->
    <van-field name="slider" label="滑块">
      <template #input>
        <van-slider v-model="sliderVal" />
      </template>
    </van-field>
    <!-- 文件上传 -->
    <van-field name="uploader" label="文件上传">
      <template #input>
        <van-uploader v-model="uploadVal" />
      </template>
    </van-field>
    <!-- Picker 组件 -->
    <van-field
      v-model="pickerVal"
      readonly
      clickable
      name="picker"
      label="选择器"
      placeholder="点击选择城市"
      @click="showPicker = true"
    />
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
    <!-- DatetimePicker 组件 -->
    <van-field
      v-model="datetimePickerVal"
      readonly
      clickable
      name="datetimePicker"
      label="时间选择"
      placeholder="点击选择时间"
      @click="showDatetimePicker = true"
    />
    <van-popup v-model:show="showDatetimePicker" position="bottom">
      <van-datetime-picker
        type="time"
        @confirm="onDatetimePickerConfirm"
        @cancel="showDatetimePicker = false"
      />
    </van-popup>
    <!-- 省市区选择器 Area 组件 -->
    <van-field
      v-model="areaVal"
      readonly
      clickable
      name="area"
      label="地区选择"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model:show="showArea" position="bottom">
      <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="showArea = false" />
    </van-popup>
    <!-- 日历 Calendar 组件 -->
    <van-field
      v-model="calendarVal"
      readonly
      clickable
      name="calendar"
      label="日历"
      placeholder="点击选择日期"
      @click="showCalendar = true"
    />
    <van-calendar v-model:show="showCalendar" @confirm="onCalendarConfirm" />
  </div>
</template>

<script lang="ts">
  //用到地区组件需要加载数据或者接口数据去拿
  // yarn add @vant/area-data  cnpm i @vant/area-data -S
  import { defineComponent, reactive, toRefs } from 'vue'
  import { areaList } from '@vant/area-data'

  export default defineComponent({
    name: 'child',
    setup(props, context) {
      console.log(props, context)
      const state = reactive({
        username: '111',
        password: '222',
        checked: false,
        groupChecked: [],
        checkedradio1: '1',
        checkedradio2: '3',
        count: 1, // 最小就是1了
        rateVal: 1,
        sliderVal: 10,
        uploadVal: [],
        pickerVal: '',
        showPicker: false,
        columns: ['北京', '上海', '广州', '深圳'],
        datetimePickerVal: '',
        showDatetimePicker: false,
        areaVal: '',
        showArea: false,
        areaList, // 数据格式见 Area 组件文档
        calendarVal: '',
        showCalendar: false
      })
      // 自定义事件
      context.emit('reciveChildData', state)
      const methods = {
        onConfirm: (value: any) => {
          console.log(value, 'Picker组件')
          state.pickerVal = value
          state.showPicker = false
        },
        onDatetimePickerConfirm: (value: any) => {
          console.log(value, '时间')
          state.datetimePickerVal = value
          state.showDatetimePicker = false
        },
        onAreaConfirm: (value: any) => {
          console.log(value, '地区')
          state.showArea = false
          state.areaVal = value
            .filter((item: any) => !!item)
            .map((item: any) => item.name)
            .join('/')
        },
        onCalendarConfirm: (date: any) => {
          console.log(date, '日期')
          state.calendarVal = `${date.getMonth() + 1}/${date.getDate()}`
          state.showCalendar = false
        }
      }

      return {
        ...toRefs(state),
        ...methods
      }
    }
  })
</script>

<style lang="less" scoped></style>
